<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Highcharts Example</title>
  <script type="text/javascript">
    /*$(function () {
        var chart;
        $(document).ready(function() {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    type: 'bar'
                },
                title: {
                    text: 'Biểu đồ biến động thị trường'
                },
                subtitle: {
                    text: 'dattuong.com'
                },
                xAxis: {
                    categories: ['Hà Nội', 'Bắc Ninh', 'Bắc Giang', 'Thanh Hóa', 'Lào Cai','Điện Biên','Hà Tĩnh'],
                    title: {
                        text: null
                    }
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Số lượng ấm (cái)',
                        align: 'high'
                    },
                    labels: {
                        overflow: 'justify'
                    }
                },
                tooltip: {
                    formatter: function() {
                        return ''+
                            this.series.name +': '+ this.y +' cái';
                    }
                },
                plotOptions: {
                    bar: {
                        dataLabels: {
                            enabled: true
                        }
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -100,
                    y: 100,
                    floating: true,
                    borderWidth: 1,
                    backgroundColor: '#FFFFFF',
                    shadow: true
                },
                credits: {
                    enabled: false
                },
                series: [{
                    name: 'Tháng 10',
                    data: [107, 31, 635, 203, 2,8,9]
                }, {
                    name: 'Tháng 11',
                    data: [133, 156, 947, 408, 6,100,5]
                }, {
                    name: 'Tháng 12',
                    data: [973, 914, 1054, 732, 34,7,8]
                }]
            });
        });

    });*/
    $(function () {
      // On document ready, call visualize on the datatable.
      $(document).ready(function() {

        Highcharts.visualize = function(table, options) {
                    // the categories
                    options.xAxis.categories = [];
                    $('tbody th', table).each(function(i) {
                        options.xAxis.categories.push(this.innerHTML);
                    });

                    // the data series
                    options.series = [];
                    $('tr', table).each(function(i) {
                        var tr = this;
                        $('th, td', tr).each(function(j) {
                            if (j > 0) { // skip first column
                                if (i == 0) { // get the name and init the series
                                    options.series[j - 1] = {
                                        name: this.innerHTML,
                                        data: []
                                    };
                                } else { // add values
                                    options.series[j - 1].data.push(parseFloat(this.innerHTML));
                                }
                            }
                        });
                    });

                    var chart = new Highcharts.Chart(options);
                }
        
        var table = document.getElementById('datatable'),
          options = {
            chart: {
              renderTo: 'container',
              type: 'bar'
            },
            title: {
              text: 'Biểu đồ biến động thị trường'
            },
            subtitle: {
              text: 'dattuong.com'
            },
            xAxis: {
              categories: ['Hà Nội', 'Bắc Ninh', 'Bắc Giang', 'Thanh Hóa', 'Lào Cai','Điện Biên','Hà Tĩnh'],
              title: {
                text: null
              }
            },
            yAxis: {
              min: 0,
              title: {
                text: 'Số lượng ấm (cái)',
                align: 'high'
              },
              labels: {
                overflow: 'justify'
              }
            },
            tooltip: {
              formatter: function() {
                return '' +
                  this.series.name + ': ' + this.y + ' cái';
              }
            },
            plotOptions: {
              bar: {
                dataLabels: {
                  enabled: true
                }
              }
            },
            legend: {
              layout: 'vertical',
              align: 'right',
              verticalAlign: 'top',
              x: -100,
              y: 100,
              floating: true,
              borderWidth: 1,
              backgroundColor: '#FFFFFF',
              shadow: true
            },
            credits: {
              enabled: false
            }
          };

        Highcharts.visualize(table, options);
      });
    });
  </script>
</head>
<body>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto">
</div>
<div id="content">
  <table id="datatable">
    <thead>
    <tr>
      <th></th>
      <th>Tháng 10</th>
      <th>Tháng 11</th>
    </tr>
    </thead>
    <tbody>
    <?php if (isset($data['chi_tiet'])) { ?>
      <?php foreach ($data['chi_tiet'] as $key => $de_c) { ?>
        <?php
                       $ten = $de_c->ten_thanh_pham;
        $so_luong = $de_c->so_luong;
        $gia_tien = $de_c->gia_tien;
        ?>
      <tr>
        <th><a href="http://google.com"><?php echo $ten ?></a></th>
        <td><?php echo $so_luong ?></td>
        <td><?php echo $gia_tien / 100 ?></td>
      </tr>
        <?php } ?>
      <?php } ?>
    </tbody>
  </table>
</div>

</body>
</html>